import React, { Component } from 'react';
import Head from 'views/component/head/head';
import { Picker, List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import TableBox from 'views/component/table/table';
import { hashHistory } from 'react-router';
import './device.scss';
import InfiniteScroll from 'react-infinite-scroller';
import api from 'js/api/index';
import { i18n } from 'js/core/i18n';

let pagesize = 10;
const heads = [i18n.get('设备id,设备类型'), i18n.get('所属门店'), i18n.get('安装位置'), i18n.get('设备类别')];

let typeList = [
	{
		label: i18n.get('全部设备'),
		value: -1,
	},
	{
		label: i18n.get('客流设备'),
		value: 1,
	},
	{
		label: i18n.get('监控设备'),
		value: 2,
	},
	{
		label: i18n.get('人脸设备'),
		value: 3,
	},
	{
		label: i18n.get('EAS设备'),
		value: 4,
	},
	{
		label: i18n.get('RFID设备'),
		value: 5,
	},
];

class Device extends Component {
	constructor() {
		super()
		this.query = {
			shopName: '',
			pagesize: pagesize,
			pageindex: 1,
		}
		this.state = {
			data: [],
			shop: null,
			hasMore: true
		}
	}
	DeviceBaseListPage = () => {
		api('/Device/DeviceBaseListPage', this.query).then((data) => {
			this.setState({ data: data.data })
		});
	}
	loadMore = () => {
		if (this.state.hasMore) {
			api('/Device/DeviceBaseListPage', this.query).then((data) => {
				this.query.pageindex += 1;
				this.state.data = this.state.data.concat(data.data);
				if (data.data.length < pagesize) {
					this.setState({ data: this.state.data, hasMore: false, loading: false })
				} else {
					this.setState({ data: this.state.data })
				}
			});
		}
	}
	search = () => {
		let data = this.props.form.getFieldsValue();
		if (data.sNo && data.sNo !== '') {
			this.query.sNo = data.sNo;
		} else {
			delete this.query.sNo
		}
		if (this.state.shop) {
			this.query.shopName = this.state.shop.ShopName;
		} else {
			delete this.query.shopName;
		}
		if (data.DeviceTypeID && data.DeviceTypeID[0] !== -1) {
			this.query.DeviceTypeID = data.DeviceTypeID
		} else {
			delete this.query.DeviceTypeID
		}
		this.query.pageindex = 1;
		this.setState({ data: [], hasMore: true })
	}
	shopNameOnChange = (shopInfo) => {
		this.setState({ shop: shopInfo })
	}
	complete = () => {
		this.query.pageindex = 1;
		this.setState({ data: [], hasMore: true })
	}
	render() {
		const { getFieldProps } = this.props.form;
		let { hasMore, data, DeviceTypeID, loading, shop } = this.state;
		return <div id="device-box" className="flex-col">
			<div className="device-container">
				<List className="picker-list mb20">
					<div className="deviceItem device-border flex-vcenter">
						<SelectTitle classStyle="name">{i18n.get('选择店铺')}</SelectTitle>
						<SubViewLink moduleName="shopSearch" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择店铺')} modelData={{ onChange: this.shopNameOnChange }}>
							{shop ? shop.ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}
						</SubViewLink>
					</div>
					<InputItem
						{...getFieldProps('sNo')}
						clear
						placeholder={i18n.get("请输入SN码")}
						className="device-border"
					><SelectTitle classStyle="sn">{i18n.get("SN码")}</SelectTitle></InputItem>
					<Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")}
						data={typeList}
						cols={1}
						{...getFieldProps('DeviceTypeID')}
					>
						<List.Item arrow="horizontal">
							<SelectTitle classStyle="camera">{i18n.get("设备类型")}</SelectTitle>
						</List.Item>
					</Picker>
					<div className="flex-center"><button type="button" onClick={this.search}>{i18n.get("确认搜索")}</button></div>
				</List>
			</div>
			<div className="flex-g-1 scroll-absolute">
				<InfiniteScroll
					pageStart={0}
					useWindow={false}
					loadMore={this.loadMore}
					hasMore={hasMore}
					threshold={50}
				>
					<TableBox heads={heads} >
						{data.map((item, index) => (
							<tr key={item.DeviceID}>
								<td>
									<p>{item.devid}</p>
									<p>{item.DeviceTypeName}</p>
								</td>
								<td>{item.ShopName}</td>
								<td>{item.DevicePosition}</td>
								<td>{item.DeviceClassName}</td>
							</tr>
						))}
					</TableBox>
				</InfiniteScroll>
			</div>
			<SubViewLink moduleName="addDevice" className="device-btn" title={i18n.get("添加设备")} modelData={{ complete: this.complete }}>
				<button type="button" className="btn btn-primary">{i18n.get("添加设备")}</button>
			</SubViewLink>
		</div>;
	}
}

export default createForm()(Device);

